<template>
  <div class="content">
    <p>日期和时间点</p>
    <div class="group anvil">
      <div class="block">
        <span class="demonstration">默认</span>
        <anvil-date-picker
          v-model="value1"
          type="datetime"
          placeholder="选择日期时间"
        >
        </anvil-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <anvil-date-picker
          v-model="value2"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
          :picker-options="pickerOptions"
        >
        </anvil-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">设置默认时间</span>
        <anvil-date-picker
          v-model="value3"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
        >
        </anvil-date-picker>
      </div>
    </div>

    <div class="group el">
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">设置默认时间</span>
        <el-date-picker
          v-model="value3"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
        >
        </el-date-picker>
      </div>
    </div>

    <p>日期和时间范围</p>
    <div class="group anvil">
      <div class="block">
        <span class="demonstration">默认</span>
        <anvil-date-picker
          v-model="value21"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </anvil-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <anvil-date-picker
          v-model="value22"
          type="datetimerange"
          :picker-options="pickerOptions2"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </anvil-date-picker>
      </div>
    </div>

    <div class="group el">
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value21"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value22"
          type="datetimerange"
          :picker-options="pickerOptions2"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </div>
    </div>

    <p>默认的起始与结束时刻</p>
    <div class="group anvil">
      <div class="block">
        <span class="demonstration">起始日期时刻为 12:00:00</span>
        <anvil-date-picker
          v-model="value31"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']"
        >
        </anvil-date-picker>
      </div>
      <div class="block">
        <span class="demonstration"
        >起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span
        >
        <anvil-date-picker
          v-model="value32"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']"
        >
        </anvil-date-picker>
      </div>
    </div>

    <div class="group el">
      <div class="block">
        <span class="demonstration">起始日期时刻为 12:00:00</span>
        <el-date-picker
          v-model="value31"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']"
        >
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration"
        >起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span
        >
        <el-date-picker
          v-model="value32"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']"
        >
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      value3: "",

      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value21: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value22: "",

      value31: "",
      value32: "",
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.group {
  /* border: 1px solid red; */
  padding: 6px;

  &.anvil {
    border-color: skyblue;
  }

  &.el {
    border-color: gray;
    display: block;
  }
}
</style>
